<div class="hd df jcsb" *ngIf="(isLogin$ | async)">
  <div class="l"></div>
  <div class="r">
    <span
      [routerLink]="['/assets/deposit']"
      [queryParams]="{ coin: onSymbol.mu }"
    >
      {{ "i18n.exchange.deposit" | translate: lang }}
    </span>
  </div>
</div>
<!--
  <div class="hd df jcsb" *ngIf="!(isLogin$ | async)">
    <app-login-tip></app-login-tip>
  </div>
-->
<div class="bd" [formGroup]="validateForm">
  <mat-form-field style="width:100%">
    <input
      [textMask]="priceMask"
      matInput
      formControlName="price"
      placeholder="{{ 'i18n.exchange.price' | translate: lang }}"
    />
    <span matSuffix>{{ onSymbol.mu }}</span>
  </mat-form-field>
  <mat-form-field style="width:100%">
    <input
      [textMask]="amountMask"
      matInput
      formControlName="amount"
      placeholder="{{ 'i18n.exchange.amount' | translate: lang }}"
    />
    <span matSuffix>{{ onSymbol.zi }}</span>
  </mat-form-field>
  <!-- <div class="i">
    <div class="h">{{ "i18n.exchange.price" | translate: lang }}</div>
    <div class="b">
      <input
        [textMask]="pointMask"
        matInput
        formControlName="price"
        placeholder="{{'i18n.exchange.price' | translate:lang}}"
      />
      <span>{{ onSymbol.mu }}</span>
    </div>
  </div>
  <div class="i">
    <div class="h">{{ "i18n.exchange.amount" | translate: lang }}</div>
    <div class="b">
      <input
        [textMask]="pointMask"
        matInput
        formControlName="amount"
        placeholder="{{'i18n.exchange.amount' | translate:lang}}"
      />
      <span>{{ onSymbol.zi }}</span>
    </div>
  </div> -->
</div>
<div class="ft">
  <div class="h">
    <mat-slider
      [max]="slider.max"
      [min]="slider.min"
      [step]="slider.step"
      [thumbLabel]="slider.thumbLabel"
      [(ngModel)]="slider.val"
      (input)="onInputSlider($event)"
      style="width:100%;margin-top: -20px;"
    ></mat-slider>
  </div>

  <div class="b df jcsb aic" style="margin-bottom: 7px;">
    <span>{{ "i18n.exchange.ava" | translate: lang }}</span>
    <input [textMask]="pointMask" readonly [value]="avaMu" />
    <span>{{ onSymbol.mu }}</span>
  </div>
  <div class="b df jcsb aic" style="margin-bottom: 20px;">
    <span>{{ "i18n.exchange.totalPrice" | translate: lang }}</span>
    <input [textMask]="pointMask" readonly [formControl]="total" />
    <span>{{ onSymbol.mu }}</span>
  </div>
  <div class="f">
    <button
      matRipple
      v-loading="loading || shouldBeDisabled"
      (click)="addOrder()"
    >
      {{ "i18n.exchange.buy" | translate: lang }} {{ onSymbol.zi }}
    </button>
  </div>
</div>
